<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.ico">
  <title>壹脉智能CRM</title>
  <link href="./css/bootstrap.min.css" rel="stylesheet">
  <link href="./css/perfect-scrollbar.min.css" rel="stylesheet">
  <link href="css/style.min.css" rel="stylesheet">
  <!-- You can change the theme colors from here -->
  <link href="css/colors/default.css" id="theme" rel="stylesheet">
  <link rel="stylesheet" href="css/diy.min.css">

</head>

<body class="fix-header fix-sidebar card-no-border">
<div class="preloader">
  <div class="loader">
    <div class="loader__figure"></div>
    <p class="loader__label">壹脉</p>
  </div>
</div>
<div id="main-wrapper">
  <!-- 导航 -->
  <header class="topbar">
    <nav class="navbar top-navbar navbar-expand-md navbar-light">
      <div class="navbar-header">
        <a class="navbar-brand" href="../index.html">
          <b>
            <img src="../assets/images/diy/yimai.png" alt="homepage" class="dark-logo"/>
          </b>
          <span>
              <span class="fs18 cblue p-l-6 fbold">壹脉智能CRM</span>
            </span>
        </a>
      </div>
      <div class="navbar-collapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link nav-toggler hidden-md-up waves-effect waves-dark"href="javascript:void(0)">
              <i class="sl-icon-menu"></i>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link sidebartoggler hidden-sm-down waves-effect waves-dark"href="javascript:void(0)">
              <i class="sl-icon-menu"></i>
            </a>
          </li>
        </ul>
        <user-head></user-head>
      </div>
    </nav>
  </header>
  <!-- 侧边栏 -->
  <aside class="left-sidebar">
    <div class="scroll-sidebar">
      <company-position></company-position>
      <nav class="sidebar-nav p-0">
        <c-slider current="16"></c-slider>
      </nav>
    </div>
  </aside>
  <!-- main -->
  <div class="page-wrapper">
    <div class="container-fluid">
      <div class="row page-titles">
        <div class="col-md-5 align-self-center">
          <h3 class="text-themecolor">获客文章分类管理</h3>
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)">HOME</a></li>
            <li class="breadcrumb-item active">获客文章分类管理</li>
          </ol>
        </div>
      </div>
      <div class="row bgfff p-t-30 p-l-30 p-r-31 p-b-30 m-b-20">
        <el-row style="width: 100%">
          分类管理
          <el-button @click="dialogFormVisible = true" class="btncss">添加分类</el-button>
        </el-row>
        <el-row style="overflow-x:auto;width: 100%;display:block;">
          <el-table border align="center"  highlight-current-row
                    :data="tableData"
                    style="overflow-x:auto;width: 100%;display:block;" >
            <el-table-column align="center" type="index" width="50"  label="序号"> </el-table-column>
            <el-table-column align="center" prop="name" label="分类名称" > </el-table-column>
            <el-table-column align="center" prop="articlesNum" label="文章数量" > </el-table-column>
            <el-table-column align="center" prop="sort" label="排序"> </el-table-column>
            <el-table-column align="center" prop="enable" label="是否启用"  >
              <template slot-scope="scope">
                <el-switch @change="pubStateChange(scope.row)"
                           v-model="scope.row.enable"
                           active-text="启用"
                           inactive-text="禁用">
                </el-switch>
              </template>
            </el-table-column>

            <el-table-column align="center" fixed="right" label="操作"  width="170">
              <template slot-scope="scope">
                <el-button type="text" @click="editRow(scope.row)" size="small">
                  编辑
                </el-button>
                <el-button type="text" @click="deleteRow(scope.row)" size="small">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row  style="margin-top:10px;">
          <el-pagination
                  layout="total, sizes, prev, pager, next"
                  :current-page="current"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="pageSize"
                  :total="totalCount"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
          />
        </el-row>
        <div class="fs14 p-t-18 p-b-15"></div>
      </div>
    </div>
  </div>

  <el-dialog title="添加分类" :rules="rules" ref="form" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="分类名称"  prop="name" :label-width="formLabelWidth">
        <el-input v-model="form.name" ></el-input>
      </el-form-item>
      <el-form-item label="排列顺序"  prop="name" :label-width="formLabelWidth">
        <el-input v-model="form.sort" ></el-input>
      </el-form-item>

      <el-form-item label="是否启用" :label-width="formLabelWidth">
        <el-switch
                   v-model="form.enable"
                   active-text="启用"
                   inactive-text="禁用">
        </el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button  class="btncss" @click="submitData('form')" >确 定</el-button>
    </div>
  </el-dialog>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/perfect-scrollbar.jquery.min.js"></script>
<script src="js/sidebarmenu.js"></script>
<script src="js/custom.min.js"></script>
<script src="js/layer/layer.js"></script>
<script src="js/vue.js"></script>
<script src="js/config.js"></script><script src="js/extend.js"></script>
<script>
  $(function () {

    var vw = new Vue({
      el: '#main-wrapper',
      data: {
        couponList: [],
        enable:true,
        totalCount : 0,
        current: 1 ,
        pageSize:10,
        tableData: [],
        formLabelWidth: '120px',
        dialogFormVisible:false,
        title:"添加分类",
        form:{
          essayTypeId:'',
          name:'',
          sort:'',
          enable:0
        },
        rules:{
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' },
            { min: 1, max: 8, message: '长度在 1 到 8 个字符', trigger: 'blur' }
          ],}
      },
      mounted() {
        this.searchPage();
      },
      methods: {
        submitData(formName){
          if(this.form.essayTypeId){
            if(this.form.name){
              const data = {
                data : this.form
              }
              $.cAjax('/crmPc/essayType/update',data).then(data => {
                if(data){
                  this.dialogFormVisible = false;
                  this.searchPage();
                }
              }).catch(function (err) {
              });
            }else{
              layer.msg('名称不能为空');
            }
          }else{
            if(this.form.name){
              const data = {
                data : this.form
              }
              $.cAjax('/crmPc/essayType/add',data).then(data => {
                if(data){
                  this.dialogFormVisible = false;
                  this.searchPage();
                }
              }).catch(function (err) {
              });
            }else{
              layer.msg('名称不能为空');
            }
          }
        },
        editRow(row){
          this.title = "修改分类";
          this.dialogFormVisible = true;
          this.form = row;
        },
        searchPage(){
          const setting = {
            data : {
              pageSize : this.pageSize,
              pageNum : this.pageNum
            }
          }
          $.cAjax('/crmPc/essayType/queryPage',setting).then(data => {
            if(data){
              this.tableData = data.list;
              this.tableData.forEach(item =>{
                item.enable = item.enable === 0 ? false : true
                item.essayTypeId = item.id;
              })
              this.totalCount = data.total;
            }
          }).catch(function (err) {
          });
        },
        handleSizeChange(pageSize) {
          this.pageSize = pageSize
          this.searchPage();
        },
        handleCurrentChange(currentPage) {
          this.currentPage = currentPage
          this.searchPage();
        },
        pubStateChange(row){
          const setting = {
            data : {
              essayTypeId : row.essayTypeId,
              enable : row.enable == true ? 1 : 0
            }
          }
          $.cAjax('/crmPc/essayType/update',setting).then(data => {
            layer.msg('操作成功');
            this.searchPage();
          }).catch(function (err) {
          });
        },
        deleteRow(row){
          layer.confirm('确定要删除这个分类吗？', {
            skin: 'confirm-class',
            btn: ['取消', '确定']
          }, (i => {
            layer.close(i);
          }), () => {
            const setting = {
              data : {
                essayTypeId : row.essayTypeId
              }
            }
            $.cAjax('/crmPc/essayType/deleteById',setting).then(data => {
              layer.msg('操作成功');
              this.searchPage();
            }).catch(function (err) {
            });
          });
        },
      },
    })
  })
</script>


<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="css/index.css">
<style type="text/css">
  .btncss{
    background-color: #51CDCB;
    border: 1px #51CDCB solid;
    color: white;
    margin-left: 20px;
  }
</style>
</body>
</html>

